<script setup>
// 导入相关函数
import { provide, reactive } from 'vue';
// 导入其它组件
import CartItem from './CartItem.vue';

// 定义响应数据
const items = reactive([
  { id: 1234, name: '中兴 Axon 40 Ultra', price: 7298, amount: 1 },
  { id: 2233, name: '小米MIX Alpha', price: 19999, amount: 1 },
  { id: 3344, name: '红魔7Pro', price: 5699, amount: 2 }
]);

// 用 provide 向子孙提供数据
provide( 'items' , items );

</script>

<template>
    <div class="cart">
        <cart-item v-for="(item,index) in items" 
                   :item="item" 
                   :ordinal="index"
                   :key="item.id"
                   class="cart-item">
        </cart-item>
    </div>
</template>

<style scoped>
.cart {
    margin: 15px;
    border: 1px solid blue;
}

.cart-item {
    margin: 10px;
    border: 1px solid #dedede;
}
</style>